<!-- 商品信息详情页 -->
<template>
	<view>
		<view class="top">
			<span class='close'>
				<u-icon name="close" color='#fff' size='20px' @click="goBack"></u-icon>
			</span>
			<figure>
				<image src="../../../static/imgs/banner-01.jpg" mode="scaleToFill"></image>
			</figure>
		</view>
		<view class="main">
			<view class="select-box">
				<view class="detail-name">
					<text>{{shopInfo.name}}</text>
				</view>
				<view class="detail-enname">
					<text>{{shopInfo.categoryName}}</text>
				</view>
				<view class="select" v-for="(item,index) in flavors" :key="index">
					<view class="select-info">
						<span class='select-title'>{{item.name}}</span>
						<span class="selector" :class="{ active:item.statusCurrent == cindex }"
							v-for="(citem,cindex) in item.value" :key="cindex"
							@click="selectChange(item.value,cindex)">{{citem}}</span>
					</view>
				</view>
			</view>
			<view class="product-detail">
				<view class="product-title">
					<text>商品详情</text>
				</view>
				<view class="product-content">
					<text>
						{{shopInfo.description}}
					</text>
				</view>
			</view>
			<view class="num-price">
				<view class="price">
					<text class="total">￥{{shopInfo.price}}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="shop-cart" @click="goShopCart">
				<u-icon name="shopping-cart" label="购物车" labelPos='bottom' labelSize='12px' size="30px"></u-icon>
			</view>
			<view class="add-buy" @click="addCart">
				<view class="add-cart">
					<text>加入购物车</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品个数
				shopValue: 1,
				// 商品信息
				shopInfo: {},
				// 口味数组
				flavors: [{
						name: '甜度',
						value: ['三分糖', '半糖', '全糖'],
						statusCurrent: 0
					},
					{
						name: '温度',
						value: ['少冰', '常温', '多冰'],
						statusCurrent: 0
					},
					{
						name: '杯型',
						value: ['中杯', '大杯', '超大杯'],
						statusCurrent: 0
					}
				]
			}
		},
		props: {
			goodId: String,
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack(-1);
			},

			// 选择器改变
			selectChange(array, index) {
				this.flavors.filter(item => {
					if (item.value == array) {
						item.statusCurrent = index
					}
				})
				// 强制页面刷新
				this.$forceUpdate()
			},

			// 前往购物车页
			goShopCart() {
				uni.navigateTo({
					url: "/pages/index/index?tarIndex=2"
				})
			},

			// 添加购物车
			addCart() {
				let coffeeFlavor = "";
				this.flavors.map(item => {
					coffeeFlavor += item.value[item.statusCurrent] + ',';
				})

				this.$ajax.postShopCart.post({
					coffeeId: this.shopInfo.id,
					amount: this.shopInfo.price.toString(),
					name: this.shopInfo.name,
					coffeeFlavor: coffeeFlavor,
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '加入购物车成功！',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/index/index?tarIndex=2"
							})
						}, 1000)
					}
				})
			},

		},
		onLoad(option) {
			let shopInfo = JSON.parse(decodeURIComponent(option.info));
			this.shopInfo = shopInfo
			// 对商品口味的数据进行处理
			// this.shopInfo.flavors.map(item => {
			// 	item.value = ['三分糖', '半糖', '全糖']
			// 	item.statusCurrent = 0;
			// })
			// console.log(this.shopInfo.flavors)

		}
	}
</script>

<style lang="scss" scoped>
	.top {
		position: relative;
		height: 240px;

		.close {
			position: fixed;
			top: 20rpx;
			left: 20rpx;
		}

		image {
			width: 100%;
		}
	}

	.main {
		background-color: #f5f5f5;
		overflow: auto;
		padding: 0 0 150rpx 0;

		.select-box {
			padding: 20rpx 20rpx 20rpx 20rpx;
			margin: 15rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.detail-name {
				font-weight: 650;
			}

			.detail-enname {
				font-size: 12px;
				color: #aaa;
			}

			.select {

				line-height: 100rpx;

				.select-info {
					display: flex;
					justify-content: space-around;
					align-items: center;
				}

				.select-title {
					margin-right: 20rpx;
					width: 100rpx;
					display: inline-block;
				}

				.selector {
					height: 60rpx;
					line-height: 60rpx;
					display: inline-block;
					border: 1px solid transparent;
					width: 160rpx;
					color: #6d86c4;
					text-align: center;
					border-radius: 20rpx;
					margin-right: 20rpx;
					background-color: #f5f5f5;

					&.active {
						background-color: #f7f9ff;
						border: 1px solid #6d86c4;
					}
				}
			}
		}

		.product-detail {
			text-align: left;
			width: 90%;
			background-color: #fff;
			border-radius: 8px;
			margin: 0 auto;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.product-title {
				font-size: 16px;
				font-weight: bold;
				margin: 20rpx 0;
			}

			.product-content {
				font-size: 14px;
			}
		}

		.num-price {
			padding: 20rpx 20rpx 20rpx 20rpx;
			margin: 15rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.total {
				color: #e06e11;
				font-weight: bolder;
				float: left;
				width: 50%;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		height: 100rpx;
		z-index: 1000;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 10rpx 10rpx 10rpx;

		.add-buy {
			line-height: 100rpx;
			display: flex;
			width: 70%;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-right: 20rpx;
			color: #fff;

			.add-cart {
				background-color: #f5916d;
				width: 80%;
				border-radius: 50rpx;
			}

		}
	}
</style>
